import { Row } from 'antd';
import React from 'react';
import css from './index.less';
import ToolbarItem from './ToolbarItem';

const Toolbar = ({
  children,
  vertical = false,
  style,
  ...rest
}) => {
  const extraStyle = vertical
    ? { flexDirection: 'column', justifyContent: 'center' }
    : { alignItems: 'center' };
  return (
    <Row
      gutter={15}
      className={css.toolbar}
      type="flex"
      style={{ ...extraStyle, ...style }}
      {...rest}
    >
      {children}
    </Row>
  );
};

export { ToolbarItem };

export default Toolbar;
